<?php
/**
 * Yii view index
 *
 * @author luubk
 * @since May 14, 2013 - 10:26:08 PM
 */
?>

<style>
    #luubkfolders{
        float: left;
        width: 20%;
        height: 350px;
        overflow-y: scroll;
    }

    #luubkfolders ul{
        list-style: none;
        margin: 7px;
    }

    #luubkfolders ul li a{
        cursor: pointer;
        color: #666;
        text-decoration: none;
    }

    #luubkfolders ul li a.active{
        color: #2c93dd;
    }

    #luubkfiles{
        float: left;
        height: 350px;
        overflow-y: scroll;
        width: 80%;
    }
    #luubkfiles ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #luubkfiles ul li{
        display: inline-block;
        width: 80px;
        height: 100px;
        text-align: center;        
        overflow: hidden;
        margin: 5px;
        padding: 0;
    }
    #luubkfiles ul li a{
        cursor: pointer;
        color: #333;
        text-decoration: none;
    }

    #luubkfiles ul li a .file_preview{
        display: block;
        width: 70px;
        line-height: 70px;
        margin: 0 auto;
    }
    #luubkfiles ul li a .file_preview img{
        max-width: 80px;
    }
    #luubkfiles ul li a .file_name{
        overflow: hidden;
        width: 100%;
    }

    #luubkfiles ul li a.active{
        text-align: center;
    }
    #luubkfiles ul li a.active .file_preview
    {
        background: #eee;        
    }

    #luubkfiles ul li a.active .file_name
    {
        background: #2c93dd;
        color: #fff;
    }
    #luubkfiles ul li a:hover .file_preview
    {
        background: #eee;        
    }

    #luubkfiles ul li a:hover .file_name
    {
        background: #2c93dd;
        color: #fff;
    }

    .progress { position:relative; width:100%; border: 0;height:3px;border-radius: 0 }
    .bar { background-color: #B4F5B4; width:0%; height:3px;border-radius: 0}
    .percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
<!--Image Gallery Box Start-->
<div class="grid">

    <div class="grid-title">
        <div class="pull-left">
            <form id="myForm" action="<?php echo $this->createUrl('files/upload', array('lang' => Yii::app()->language)) ?>" method="post"> 
                <input type='file' name='file' onchange="$(this).submit()"
                       style="border: 0" multiple/>
                <input type="hidden" name="folder" id="upload_folder" value="<?php echo $path . "/"; ?>" multiple/>
            </form>
        </div>
        <div class="pull-right">            

            <!--            <a href="#" class="btn" onclick="return rename_file()">
                            <i class="icon-pencil"></i>
            <?php echo Yii::t('files', 'Rename') ?>
                        </a>-->
            <a href="#" class="btn" onclick="return new_folder()">
                <i class="icon-plus"></i>
                <?php echo Yii::t('files', 'New folder') ?>
            </a>
<!--            <a class="btn btn-inverse" onclick="return remove_file()">
                <i class="icon-remove"></i>-->
                <?php // echo Yii::t('files', 'Remove') ?>
            <!--</a>-->            
        </div>       
        <div class="clear"></div>   
    </div>
    <div class="progress">
        <div class="bar"></div >
        <div class="percent">0%</div >
    </div>
    <div id="status"></div>
    <div class="grid-content overflow"> 
        <div id="luubkfolders">
            <ul>
                <li>
                    <a onclick="activeFolder($(this))" data="<?php echo $path . "/"; ?>"
                       id='root_folder' class="link_folder">
                        <i class="icon icon-folder-open"></i> root/
                    </a>
                    <div class="folder_child">
                        <?php $this->renderPartial('folders', array('files' => $files)); ?>
                    </div>
                </li>
            </ul>

        </div>
        <div id="luubkfiles">
            <?php $this->renderPartial('files', array('files' => $files)); ?>
        </div>
        <div class="clear"></div>
    </div>
    <!--Image Gallery Box END-->    
</div>

<script src="<?php echo $this->asset ?>/js/tiny_mce/tiny_mce_popup.js"></script>
<script src="<?php echo $this->asset ?>/js/jquery.form.js"></script>
<script>
                    ACTIVE_ID = '';
                    ACTIVE_PATH = '';
                    LAST_FOLDER_EL = $('#root_folder');

                    $(function() {

                        var bar = $('.bar');
                        var percent = $('.percent');
                        var status = $('#status');

                        $('#myForm').ajaxForm({
                            dataType: 'json',
                            beforeSend: function() {
                                status.empty();
                                var percentVal = '0%';
                                bar.width(percentVal)
                                percent.html(percentVal);
                            },
                            uploadProgress: function(event, position, total, percentComplete) {
                                var percentVal = percentComplete + '%';
                                bar.width(percentVal)
                                percent.html(percentVal);
                                //console.log(percentVal, position, total);
                            },
                            success: function(data) {
                                var percentVal = '100%';
                                bar.width(percentVal)
                                percent.html(percentVal);
                                alert(data.mess);
                            },
                            complete: function(xhr) {
                                activeFolder(LAST_FOLDER_EL);
                            }
                        });

                    });

                    var FileBrowserDialogue = {
                        init: function() {
                            // Here goes your code for setting your custom things onLoad.
                        },
                        mySubmit: function(URL) {
                            var win = tinyMCEPopup.getWindowArg('window');

                            // pass selected file path to TinyMCE
                            win.document.getElementById(tinyMCEPopup.getWindowArg('input')).value = URL;

                            // are we an image browser?
                            if (typeof(win.ImageDialog) != 'undefined') {
                                // update image dimensions
                                if (win.ImageDialog.getImageData) {
                                    win.ImageDialog.getImageData();
                                }
                                // update preview if necessary
                                if (win.ImageDialog.showPreviewImage) {
                                    win.ImageDialog.showPreviewImage(URL);
                                }
                            }

                            // close popup window
                            tinyMCEPopup.close();
                        }
                    }

                    tinyMCEPopup.onInit.add(FileBrowserDialogue.init, FileBrowserDialogue);

                    function activeFile(el)
                    {
                        $(".file_link").each(function() {
                            $(this).removeClass('active');
                        });

                        el.addClass('active');
//                        BASE_URL = '<?php echo $base_url ?>';
//                        ACTIVE_ID = el.parent().attr('id');
//                        ACTIVE_PATH = el.attr('data');
//
//                        beautyUrl = BASE_URL + '/' + el.attr('data');

<?php // if (isset($_GET['type']) && $_GET['type'] == 'tinymce'):  ?>
//                            FileBrowserDialogue.mySubmit(beautyUrl); // pass selected file path to TinyMCE 
<?php // else:  ?>
//                            id = "#" + getParameterByName('field'); // ID của INPUT cần chèn
//                            dialog = "#" + getParameterByName('dialog'); // ID của Dialog chứa iframe
//                            prvid = "#prv_" + getParameterByName('field'); // ID của ảnh cần chèn
//                            window.parent.$(id).attr('value', beautyUrl);
//                            window.parent.$(prvid).attr('src', beautyUrl);
//                            window.parent.$(prvid).attr('data-glisse-big', beautyUrl);
//                            window.parent.$(dialog).modal('hide');
//                            window.parent.document.getElementById(prvid).scrollIntoView();
//                            window.parent.$(id).focus();
<?php // endif;  ?>
                    }

                    function chooseFile(el)
                    {
                        BASE_URL = '<?php echo $base_url ?>';
                        ACTIVE_ID = el.parent().attr('id');
                        ACTIVE_PATH = el.attr('data');

                        beautyUrl = BASE_URL + '/' + el.attr('data');

<?php if (isset($_GET['type']) && $_GET['type'] == 'tinymce'): ?>
                            FileBrowserDialogue.mySubmit(beautyUrl); // pass selected file path to TinyMCE 
<?php else: ?>
                            id = "#" + getParameterByName('field'); // ID của INPUT cần chèn
                            dialog = "#" + getParameterByName('dialog'); // ID của Dialog chứa iframe
                            prvid = "#prv_" + getParameterByName('field'); // ID của ảnh cần chèn
                            window.parent.$(id).attr('value', beautyUrl);
                            window.parent.$(prvid).attr('src', beautyUrl);
                            window.parent.$(prvid).attr('data-glisse-big', beautyUrl);
                            window.parent.$(dialog).modal('hide');
                            window.parent.document.getElementById(prvid).scrollIntoView();
                            window.parent.$(id).focus();
<?php endif; ?>
                    }
                    function getParameterByName(name)
                    {
                        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
                        var regexS = "[\\?&]" + name + "=([^&#]*)";
                        var regex = new RegExp(regexS);
                        var results = regex.exec(window.location.search);
                        if (results == null)
                            return "";
                        else
                            return decodeURIComponent(results[1].replace(/\+/g, " "));
                    }
                    function activeFolder(el)
                    {
                        LAST_FOLDER_EL = el;
                        $(".folder_link").each(function() {
                            $(this).removeClass('active');
                        });

                        el.addClass('active');
                        $('#upload_folder').val(LAST_FOLDER_EL.attr('data'));

                        URL = '<?php echo $this->createUrl('files/searchDir', array('lang' => Yii::app()->language)) ?>';

                        // Lấy thư mục con
                        $.post(URL, {path: el.attr('data'), filter: 'folder'}, function(data) {
                            el.parent('li').children('.folder_child').html(data);
                        });

                        // Lấy file trong thư mục
                        $.post(URL, {path: el.attr('data')}, function(data) {
                            $('#luubkfiles').html(data);
                        });

                        ACTIVE_ID = el.parent().parent().attr('id');
                        ACTIVE_PATH = el.attr('data');
                    }

                    function remove_file()
                    {
                        if (!confirm('Có phải bạn muốn xóa phần tử này?'))
                            return false;

                        URL = '<?php echo $this->createUrl('files/remove', array('lang' => Yii::app()->language)) ?>';
                        $.post(URL, {path: ACTIVE_PATH}, function() {
                            $('#' + ACTIVE_ID).remove();
                        });

                        return false;
                    }

                    function rename_file()
                    {
                        var newname = prompt("Nhập tên mới", "TenMoi");
                        alert(LAST_FOLDER_EL.attr('data'));

                        URL = '<?php echo $this->createUrl('files/rename', array('lang' => Yii::app()->language)) ?>';
                        $.post(URL, {path: ACTIVE_PATH, newname: newname}, function() {
                            activeFolder(LAST_FOLDER_EL);
                        });

                        return false;
                    }

                    function new_folder()
                    {
                        var name = prompt("Nhập tên", "ThuMucMoi");

                        URL = '<?php echo $this->createUrl('files/newFolder', array('lang' => Yii::app()->language)) ?>';
                        $.post(URL, {folder: LAST_FOLDER_EL.attr('data'), name: name}, function() {
                            activeFolder(LAST_FOLDER_EL);
                        });

                        return false;
                    }
</script>